<template>
  <div class="applyManage-container">
    <div class="applyManage-search">
      <span class="page-title">报名列表</span>
      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="企业名称" value="1"></el-option>
          <el-option label="报名姓名" value="2"></el-option>
          <el-option label="邀请人姓名" value="3"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchApply">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
    </div>

    <!--报名管理table-->
    <div class="applyManage-table">
      <el-table ref="multipleTable" :data="applyData" border stripe fit v-loading="listLoading"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}" @filter-change="filterChange">
        <el-table-column label="id" width="80">
          <template slot-scope="scope">
            {{scope.row.id}}
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.mechanismName}}
          </template>
        </el-table-column>
        <el-table-column label="报名姓名" width="90" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.userName}}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" width="110">
          <template slot-scope="scope">
            {{scope.row.userTel}}
          </template>
        </el-table-column>
        <el-table-column label="报名人真实姓名" width="120">
          <template slot-scope="scope">
            {{scope.row.realUserName}}
          </template>
        </el-table-column>
        <el-table-column label="邀请入职人姓名" width="120">
          <template slot-scope="scope">
            {{scope.row.upUserName}}
          </template>
        </el-table-column>
        <el-table-column label="返费金额" width="80">
          <template slot-scope="scope">
            {{scope.row.reMoney}}
          </template>
        </el-table-column>
        <el-table-column label="返费时间" width="80">
          <template slot-scope="scope">
            {{scope.row.reTime}}
          </template>
        </el-table-column>
        <el-table-column label="报名时间" width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{scope.row.time | formatTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="入职状态" width="120" prop="status"
                         :filters="[{ text: '面试预约中', value: 0 }, { text: '面试通过', value: 1 }, { text: '面试失败', value: 2 },
                           { text: '放弃入职', value: 4 }, { text: '入职成功', value: 5 }, { text: '已离职', value: 6 }]"
                         :filter-multiple="false" column-key="status"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <span>{{scope.row.status | filterStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否转给驻厂" width="130" prop="setStatus"
                         :filters="[{ text: '已转', value: 1 }, { text: '未转', value: 0 }]"
                         :filter-multiple="false" column-key="setStatus"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <span>{{scope.row.setStatus | filterChangeType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否取消报名" width="110">
          <template slot-scope="scope">
            {{scope.row.delStatus == 0?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column label="处理状态" width="120" prop="customerStatus"
                         :filters="[{ text: '已处理', value: 1 }, { text: '未处理', value: 0 }]"
                         :filter-multiple="false" column-key="customerStatus"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <span>{{scope.row.customerStatus | filterDeal}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)" v-if="checkPermissionPoints(4) == 1">编辑
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getApplyList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="applyManage-dialog look-dialog"
               top="11vh">
      <el-form label-width="140px" size="mini">
        <el-form-item label="报名姓名：">
          <span>{{lookApply.userName}}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{lookApply.userTel}}</span>
        </el-form-item>
        <el-form-item label="入职状态：">
          <span>{{lookApply.status | filterStatus}}</span>
        </el-form-item>
        <el-form-item label="是否转给驻厂：">
          <span>{{lookApply.setStatus | filterChangeType}}</span>
        </el-form-item>
        <el-form-item label="状态处理：">
          <span>{{lookApply.customerStatus | filterDeal}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑" :lock-scroll="true" :visible.sync="dialogEditVisible" width="960px" top="11vh"
               class="applyManage-dialog">
      <el-form :model="ruleForm" ref="ruleForm" label-width="auto" size="mini">
        <el-form-item label="报名姓名：">
          <span>{{ruleForm.userName}}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{ruleForm.userName}}</span>
        </el-form-item>
        <el-form-item label="入职状态：">
          <span>{{ruleForm.status | filterStatus}}</span>
        </el-form-item>
        <el-form-item label="是否转给驻厂：">
          <el-radio-group v-model="ruleForm.setStatus">
            <el-radio disabled :label=0>未转</el-radio>
            <el-radio :label=1>已转</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态处理：">
          <span>{{ruleForm.customerStatus | filterDeal}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="success" style="width: 96px" @click="saveApply" :loading="sendLoad">保存</el-button>
        <el-button size="small" style="width: 96px" @click="dialogEditVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {baseUrl} from "@/api/constant";
  import {formatDate} from "@/utils/index";
  import {addApply, getApplyDetail, getInitApplyList} from "../../../api/service/service";

  export default {
    name: "applyManage",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    data() {
      return {
        keyWords: '',
        select: '1',
        listLoading: false,
        dialogLookVisible: false,
        dialogEditVisible: false,
        textMap: {
          update: '编辑',
          create: '新增'
        },
        applyData: [],
        lookApply: {},
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          mechanismName: '',
          userName: '',
          upUserName: '',
          setStatus: '',
          customerStatus: '',
          status: '',
        },
        paramFilters: [],
        ruleForm: {
          id: '',
        },
        checkApplyStatus: '',
        sendLoad: false
      }
    },
    created() {
      this.getApplyList();
    },
    methods: {
      getApplyList() {
        this.listLoading = true;
        getInitApplyList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && res.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.applyData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.applyManage;
        return permissionPoints(type, pointObj);
      },
      searchApply() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.mechanismName = '';
        this.listQuery.userName = '';
        this.listQuery.upUserName = '';

        if (this.select == 1) {
          this.listQuery.mechanismName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.userName = this.keyWords;
        } else if (this.select == 3) {
          this.listQuery.upUserName = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getApplyList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.mechanismName = '';
        this.listQuery.userName = '';
        this.listQuery.upUserName = '';
        this.listQuery.status = '';
        this.listQuery.setStatus = '';
        this.listQuery.customerStatus = '';
        this.$refs.multipleTable.clearFilter();

        this.listQuery.page = 1;
        this.getApplyList();
      },
      filterChange(value) {//过滤
        let row = null;
        let val = null;
        for (const i in value) {
          row = i; // 保存 column-key的值，如果事先没有为column-key赋值，系统会自动生成一个唯一且恒定的名称
          val = value[i];
        }
        const filter = [{
          row: row,
          op: 'contains',
          value: val
        }];
        this.setFilter(filter)
      },
      setFilter(filters) {
        for (let i in filters) {
          let filter = null;
          for (let j in this.paramFilters) {
            if (filters[i]['row'] === this.paramFilters[j]['row']) {
              filter = this.paramFilters[j];
            }
          }

          if (filter == null) {
            this.paramFilters.push({'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value});
          } else {
            filter.value = filters[i].value;
            filter.op = filters[i].op;
          }
        }

        this.paramFilters.forEach(obj => {
          if (obj.row == 'setStatus') {
            this.listQuery.setStatus = String(obj.value);
          }
          if (obj.row == 'customerStatus') {
            this.listQuery.customerStatus = String(obj.value);
          }
          if (obj.row == 'status') {
            this.listQuery.status = String(obj.value);
          }
        });
        this.listQuery.page = 1;
        this.getApplyList();
      },
      handleLook(row) {//详细信息
        this.dialogLookVisible = true;
        getApplyDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && res.data != null) {
            this.lookApply = retObj.data;
          }
        })
      },
      handleEdit(row) {//编辑
        this.dialogEditVisible = true;
        getApplyDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && res.data != null) {
            this.ruleForm = retObj.data;
            this.checkApplyStatus = retObj.data.customerStatus;
          }
        })
      },
      saveApply() {
        if (this.checkApplyStatus == 0) {
          this.sendLoad = true;
          addApply(this.ruleForm.id).then((res) => {
            let retObj = res;
            this.sendLoad = false;
            if (retObj.code == 0 && retObj.data == 1) {
              this.$refs.ruleForm.resetFields();
              this.dialogEditVisible = false;
              this.$message.success({message: '保存成功', duration: 2000});
              this.getApplyList();
            } else {
              this.$message.error({message: '保存失败，请重试', duration: 2000});
            }
          }).catch(() => {
            this.sendLoad = false;
          })
        } else {
          this.$message.info({message: '只有未处理的报名，才可以编辑', duration: 2000});
        }
      },
    },
    filters: {
      filterStatus(type) {
        if (type == 0) {
          return '面试预约中';
        } else if (type == 1) {
          return '面试通过';
        } else if (type == 2) {
          return '面试失败';
        } else if (type == 4) {
          return '放弃入职';
        } else if (type == 5) {
          return '入职成功';
        } else if (type == 6) {
          return '已离职';
        }
      },
      filterChangeType(type) {
        if (type == 0) {
          return '未转';
        } else if (type == 1) {
          return '已转';
        }
      },
      filterDeal(type) {
        if (type == 0) {
          return '未处理';
        } else if (type == 1) {
          return '已处理';
        }
      },
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    components: {
      Pagination
    }
  }
</script>

<style lang="scss" scoped>
  .applyManage-container {
    .applyManage-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 18px;
        min-width: 120px;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 120px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .excel-inout-box {
        margin-left: auto;
        margin-right: 18px;
      }
    }

    .applyManage-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .applyManage-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .look-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .applyManage-dialog {
      font-size: 14px;
      color: #606266;
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>

